
import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from '@core/services/http/api.service';
import {ApesMessageService} from "@shared/apes/message";

@Component({
  selector: 'apes-loop-table',
  template: `
    <div class="tv">
      <div class="tabl">
        <div class="tabs_jr">
          <p>{{ title }}</p>
          <p>{{ subTitle }}</p>
        </div>
        <table class="tabs-nav" [ngStyle]="{ width: tabWidth }" style="table-layout: fixed">
          <thead class="tabs-hea">
          <tr>
            <td *ngFor="let report of headerList" class="tabs-td" [ngStyle]="{width: report.width}">
              <span>{{report.headerName}}</span>
            </td>
          </tr>
          </thead>
          <tbody class="tabs-bod">
          <tr *ngFor="let report of currentTablesList">
            <td *ngFor="let header of headerList" class="tabs-td"
                [class.td-sc]="header['field']==='BASC'"
                [class.td-dssc]="(header['field']==='DSSC') && (header['field']==='DDSC') && (header['field']==='SC')">
              <span *ngIf=' ("SC" !== header["field"]) && ("DSSC" !== header["field"])
                              && ("DDSC" !== header["field"]) && ("BASC" !== header["field"])
                               '>
                <img *ngIf=' "BXLOGO" === header["bxlogo"] ' class="bxlogo"
                     [src]="report['BXLOGO'] ? 'http://10.2.0.34/' + report['BXLOGO'] : '' "/>
                <img *ngIf=' "LOGO" === header["logo"] '
                     [src]="report['LOGO'] ? 'http://10.2.0.34/' + report['LOGO'] : 'http://10.2.0.34/default/Logo51*51.png' "/>
                {{ report[header['field']] }}
              </span>
              <progress *ngIf=' "BASC" === header["field"] '
                        [value]='report["BASC"] > 30 ? 30 : report["BASC"]'
                        max="30"
                        [class.warning]='report["BASC"] > 30 '
              ></progress>
              <i *ngIf=' "BASC" === header["field"] '
                 [class.eer]='report["BASC"] > 30 '
              > {{ toHourMinute(report["BASC"]) }} </i>

              <i *ngIf=' "DSSC" === header["field"] '
                 [class.bxjg]='report["DSSC"] > (60*24)  '>
                {{ toHourMinute(report["DSSC"]) }}
                <img *ngIf=' "DSSC" === header["field"] ' class="waringImg"
                     [src]=" (report['DSSC'] > (60*24)) ? './assets/tmp/img/bi/swzx_06.png' : './assets/tmp/img/bi/jinggao.png' "/>
              </i>

              <i *ngIf=' "DDSC" === header["field"] '
                 [class.bxjg]='report["DSSC"] > (60*8) '>
                {{ toHourMinute(report["DDSC"]) }}
                <img *ngIf=' "DDSC" === header["field"] ' class="waringImg"
                     [src]=" (report['DDSC'] > (60*8)) ? './assets/tmp/img/bi/swzx_06.png' : './assets/tmp/img/bi/jinggao.png' "/>
              </i>

              <i *ngIf=' "SC" === header["field"] '
                 [class.bxjg]='report["SC"] > 60  '>
                {{ toHourMinute(report["SC"]) }}
                <img *ngIf=' "SC" === header["field"] ' class="waringImg"
                     [src]=" (report['SC'] > 60) ? './assets/tmp/img/bi/swzx_06.png' : './assets/tmp/img/bi/jinggao.png' "/>
              </i>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  `,
})

export class ApesLoopTableComponent implements OnInit {

  @Input() title: string;
  @Input() subTitle: string;
  @Input() api: string;
  @Input() headerList: any[];
  @Input() tableDataList: any[];
  @Input() tabWidth: string;

  tablesData: any[] = [];
  tablesIndex: number = 0;
  currentTablesList: any[];

  constructor(private apiService: ApiService,private msg: ApesMessageService) {

    const time = (1000 * 60) * 10;

    setInterval(() => {
      this.tablesData = [];
      this.getTablesData();
    }, time);

    setInterval(() => {
      this.currentTablesList = [];
      this.pageList(this.tablesData);
    }, 5000);

  }

  ngOnInit() {
    // debugger;
    // 判断传入的方式

    if (this.tableDataList && this.tableDataList.length > 0) {
      this.tablesData = this.tableDataList;
    } else if (this.api) {
      this.getTablesData();
    }

  }

  // 显示 天 时 分 换算
  toHourMinute(minutes) {
    if (Math.floor(minutes / 60 / 24) >= 1) {
      if (Math.floor(minutes / 60 / 24) < 10) {
        return (Math.floor(minutes / 60 / 24) + '天' + (minutes % 60 % 24) + '小时');
      }
      return (Math.floor(minutes / 60 / 24) + '天');
    } else if (Math.floor(minutes / 60 / 24) < 1) {
      if (Math.floor(minutes) < 60) {
        return (Math.floor(minutes % 60) + '分钟');
      }
      return (Math.floor(minutes / 60) + '小时' + (minutes % 60) + '分钟');
    }

  }

  // 排序
  sortarr(arr) {
    return function(obj1, obj2) {
      let val1 = obj1[arr];
      let val2 = obj2[arr];
      if (val1 > val2) {
        return -1;
      } else if (val1 < val2) {
        return 1;
      } else {
        return 0;
      }
    };
  }

  // 遍历获取到数据 每次只显示5条
  pageList(allData: any) {
    const count = allData.length;
    this.currentTablesList = [];
    let tempIndex = 0;
    for (let i = this.tablesIndex; i < count; i++) {

      if (tempIndex < 5) {
        this.currentTablesList.push(allData[i]);
      } else {
        break;
      }
      tempIndex++;
      this.tablesIndex++;
    }

    //当数据遍历完 重新请求数据
    if (this.tablesIndex >= count) {
      this.tablesIndex = 0;
    }
  }

  // 调用接口
  getTablesData() {
    if (this.api !== '') {
      let data = { 'interfaceMethod': this.api, 'pdata': {} };
      // debugger;
      this.apiService.post('report.interface', { 'body': JSON.stringify(data) }).subscribe(
        (resultData) => {
          const result = JSON.parse(resultData);
          if (result.success) {
            const data = JSON.parse(result.obj);
            for(let i = 0, len = data.length; i < len ; i++){
              data[i]['DQTS'] = data[i]['DQTS'] + '天';
              data[i]['JSCGZTS'] = data[i]['JSCGZTS'] + '天';
            }
            const templist = data;
            for (let i = 0, len = templist.length; i < len; i++) {
              let tempData = templist[i];
              tempData.tablesData = data[tempData.obj];
            }
            this.tablesData = templist;
            this.tablesData = this.tablesData.sort(this.sortarr('SC'));
            this.tablesData = this.tablesData.sort(this.sortarr('BASC'));
            this.tablesData = this.tablesData.sort(this.sortarr('DDSC'));
            this.tablesData = this.tablesData.sort(this.sortarr('HFCS'));
            this.tablesData = this.tablesData.sort(this.sortarr('DSSC'));

            this.pageList(this.tablesData);

          } else {
            this.msg.info(result.msg);
          }

        });
    } else {
      console.log('接口报错');
    }
  }


}
